<!--  -->
<template>
  <div class="login">
    <div class="lg-hd">
      <div class="lg-tl">重置密码</div>
    </div>
    <div class="lg-main">
      <div class="lg-ipt-gp">
        <div class="lg-ipt-tl">手机号</div>
        <div class="lg-ipt-box">
          <input
            class="lg-ipt"
            v-model="phone"
            type="number"
            placeholder="请输入手机号"
          />
        </div>
        <div class="tip-error" :class="isPhone ? 'on' : ''">
          请输入正确的手机号
        </div>
      </div>
      <div class="lg-ipt-gp">
        <div class="lg-ipt-tl">验证码</div>
        <div class="lg-ipt-box">
          <input
            class="lg-ipt"
            v-model="code"
            type="number"
            placeholder="请输入验证码"
          />
          <div class="code o" v-if="!isTime" @click="getCode">获取验证码</div>
          <div class="code g" v-else>{{ cutDownTime }}s</div>
        </div>
        <div class="tip-error" :class="isCode ? 'on' : ''">
          请输入正确的验证码
        </div>
      </div>
      <div class="lg-ipt-gp">
        <div class="lg-ipt-tl">新密码</div>
        <div class="lg-ipt-box">
          <input
            class="lg-ipt"
            v-model="password"
            type="password"
            placeholder="请输入密码"
          />
        </div>
        <div class="tip-error" :class="isPassword ? 'on' : ''">
          密码需8个字符以上，至少包含大写字母、小写字母、数字、特殊符号
        </div>
      </div>
      <div class="lg-ipt-gp">
        <div class="lg-ipt-tl">新密码</div>
        <div class="lg-ipt-box">
          <input
            class="lg-ipt"
            v-model="resetpassword"
            type="password"
            placeholder="请再次输入新密码"
          />
        </div>
        <div class="tip-error" :class="isResetPassword ? 'on' : ''">
          两次输入密码不一致
        </div>
      </div>

      <div class="lg-btn" @click="submitLogin">重置并登录</div>
    </div>
  </div>
</template>

<script>
const validatePwd2 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== this.loginForm.password) {
    callback(new Error("两次输入密码不一致!"));
  } else {
    callback();
  }
};
export default {
  data() {
    return {
      isCheck: false,
      isPhone: false,
      isCode: false,
      isTime: false,
      isShowModal: false,
      cutDownTime: 60,
      phone: "",
      code: "",
      password: "",
      resetpassword: "",
      isResetPassword: false,
      isPassword: false,
    };
  },
  components: {},
  methods: {
    submitLogin() {
      this.checkPassword();
      let params = {
        code: this.code,
        newPassword: this.password,
        loginPlatform: 1,
        expireTime: 86400,
      };

      this.$http
        .putMyPassword(params)
        .then(async (res) => {
          if (res.flag == 0) {
            params = {
              phoneNum: this.phone,
              password: this.password,
            };
            this.$http
              .loginPp(params)
              .then((r) => {
                // this.loginDeal(r, exp);
                localStorage.setItem("access_token", res.data.token);
              })
              .catch((e) => {
                // ElMessage.error(err.response.data.message);
              });
          } else {
            // ElMessage.error(res.message);
          }
        })
        .catch((err) => {
        //   ElMessage.error(err.response.data.message);
        });
    },
    checkPassword() {
      if (!this.checkPhone()) return;
      if (this.isEmpty(this.code)) {
        this.isCode = true;
        return;
      }
      var userPwd =
        /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+\-=\/\\|;:'",.<>?]).{8,}$/;
      if (!userPwd.test(this.password)) {
        console.log(this.password);
        this.isPassword = true;
        this.isCode = false;
        return;
      }
      if (this.password != this.resetpassword) {
        console.log(4);
        this.isResetPassword = true;
        this.isPassword = false;
        this.isCode = false;
        return;
      }
    },
    isEmpty(obj) {
      if (
        typeof obj == "undefined" ||
        obj == null ||
        obj === "" ||
        (obj + "".trim()).toString().length == 0
      ) {
        return true;
      } else {
        return false;
      }
    },
    checkPhone() {
      //验证手机号是否为空和是否输入正确
      let boolPhoneNum = false;
      if (!this.isEmpty(this.phone)) {
        var regex = /^1[3-9]\d{9}$/;
        if (!regex.test(this.phone)) {
          this.isPhone = true;
        } else {
          this.isPhone = false;
          boolPhoneNum = true;
        }
      } else {
        this.isPhone = true;
      }
      return boolPhoneNum;
    },
    getCode() {
      if (!this.checkPhone()) return;
      this.cutDown();
      const params = { p: this.phone };
      this.$http
        .getSmsVc(params)
        .then((res) => {
          if (res.flag == 0) {
            this.countdown = 60;
            this.isCode = false;
            this.timer = setInterval(() => {
              this.countdown--;
              if (this.countdown <= 0) {
                this.isCode = true;
                this.countdown = 0;
              }
            }, 1000);
          }
        })
        .catch((err) => {
          //   ElMessage.warning(err.response.data.message);
        });
    },
    //验证码倒计时
    cutDown() {
      this.isTime = true;
      this.cutDownTime = 60;
      const time = setInterval(() => {
        this.cutDownTime--;
        if (this.cutDownTime == 0) {
          clearInterval(time);
          this.isTime = false;
        }
      }, 1000);
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
